<extend name="Public/base" />
<block name="style">
    <style type="text/css">
        #main{
            padding: 0px;

        }
        #container{
            height:600px;
        }  
        .navbar{margin: 0px;}
        #addareadiv{position: absolute;z-index: 9999; margin: 10px;width: 270px;}
        #editareadiv{position: absolute;z-index: 9999; margin: 10px;width: 270px;}
    </style> 
</block>


<block name="body">

    <nav class="navbar navbar-default">
        <div class="container-fluid">

            <div class="navbar-header">
                <a class="navbar-brand" href="#">分区管理</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <button type="button" class="btn btn-default navbar-btn" id='btnshowAddarea'>新增分区</button>
<!--            <button type="button" class="btn btn-default navbar-btn " onclick="showwarehouse()">显示仓库</button>-->
            <button type="button" class="btn btn-default navbar-btn"  onclick="LoadAreaData()">刷新</button>
            <button class="btn btn-default" onclick="javascript:history.back(-1);return false;">返 回</button>
            <div class="nav navbar-nav navbar-right">
<!--            <button type="button" class="btn btn-default navbar-btn"  onclick="checkPoint()">区域识别测试</button> -->
            </div>


        </div><!-- /.navbar-collapse -->

    </nav>
    <!--添加分区面板--->
    <div id="addareadiv" style='display:none'>
        <div class="panel panel-default">
            <div class="panel-heading">增加新的区域 <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>
            <div class="panel-body">
                <form action="{:U()}" method="post" class="form1" >
                    <input type="hidden" name='aid' value="{$_aid}"/>
                    <input type="hidden" name='pid' value="{$_pid}"/>
                    <input type="hidden" name='mid' value="{$_mid}"/>
                    <div class="form-group">
                        <label>区域名称</label>
                        <select class="form-control"  name="areainfoid" >
                            <volist name="_areanamelist" id="vo">
                                <option value="{$vo.id}">{$vo.name}</option>
                            </volist>
                        </select> 
                    </div>
                  <div class="form-group">
                        <label>负责人</label>
                        <input type="text" class="form-control" name="name" placeholder="输入负责人名称">
                    </div>
                    <div class="form-group">
                        <label>联系电话</label>
                        <input type="text" class="form-control" name="phone" placeholder="输入负责人联系电话">
                    </div>
<!--                    <div class="form-group">
                        <label>配套仓库</label>
                        <select class="form-control"  name="warehouse" >
                            <volist name="warehouselist" id="vo">
                                <option value="{$vo.id}">{$vo.whName}</option>
                            </volist>
                        </select>
                    </div> -->
                    <div class="form-group hidden">
                        <label>绘制数据</label>
                        <input type="text" class="form-control" name="points" id="pointstext" placeholder="绘制数据">
                    </div>
                    <button type="button" class="btn btn-default " onclick="dreaw()"> <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> 绘制区域</button>
                    <button class="btn btn-primary  ajax-post" id="submit" type="submit" target-form="form1">确认提交</button>
                </form>
            </div>
        </div>
    </div>
    <!--编辑分区面板--->
    <div id="editareadiv" style='display:none'>
        <form action="{:U('AreaDel')}" method="post" class="form3" >
            <div class="panel panel-default">
                <div class="panel-heading">编辑新的区域 
                    <input type="hidden" name='id' class='idedit' value=""/><button class="btn btn-sm btn-danger ajax-post confirm" id="submit" type="submit" target-form="form3">删除区域</button>
                    <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
        </form>
        <div class="panel-body">
            <form action="{:U('AreaEdit')}" method="post" class="form2" >
                <input type="hidden" name='id' class='idedit' value=""/>
                 <input type="hidden" name='aid' value="{$_aid}"/>
                    <input type="hidden" name='pid' value="{$_pid}"/>
                    <input type="hidden" name='mid' value="{$_mid}"/>
                <div class="form-group">
                    <label>区域名称</label>
                    <select class="form-control"  name="areainfoid" id='areaNameedit'>
                            <volist name="_areanamelist" id="vo">
                                <option value="{$vo.id}">{$vo.name}</option>
                            </volist>
                    </select> 
                </div>
                <div class="form-group">
                    <label>负责人</label>
                    <input type="text" class="form-control" name="name" id='nameedit' placeholder="输入负责人名称">
                </div>
                <div class="form-group">
                    <label>联系电话</label>
                    <input type="text" class="form-control" name="phone" id='phoneedit' placeholder="输入负责人联系电话">
                </div>
<!--                <div class="form-group">
                    <label>配套仓库</label>
                    <select class="form-control"  name="warehouse" id='warehouseedit' >
                        <volist name="warehouselist" id="vo">
                            <option value="{$vo.id}">{$vo.whName}</option>
                        </volist>
                    </select>
                </div>-->
                <div class="form-group hidden">
                    <label>绘制数据</label>
                    <input type="text" class="form-control" name="points" id="pointsedit" placeholder="绘制数据">
                </div>
                <button type="button" class="btn btn-default " id='dreawEdit'> <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> 编辑区域</button>
                <button type="button" class="btn btn-default" style='display:none'  id='dreawEditEnd'> <span class="glyphicon glyphicon-save" aria-hidden="true"></span> 编辑完毕</button>
                <button class="btn btn-primary confirm ajax-post" id="submit" type="submit" target-form="form2">确认提交</button>
            </form>
        </div>
    </div>
</div>
<!--百度地图--->
<div id="container"> </div>


</block>

<block name="script">
    <script src="__STATIC__/thinkbox/jquery.thinkbox.js"></script>
    <script type="text/javascript">
                        //导航高亮
                        var $window = $(window);
                        $window.resize(function () {
                            $("#container").css("min-height", $window.height() - 145);
                        }).resize();
                        highlight_subnav('{:U('LbsProject/index')}');
    </script>



    <script src="http://api.map.baidu.com/api?v=1.5&ak=W7fSw2UYZWEZsT8sr0jH6OuF" type="text/javascript"></script>
    <!--加载鼠标绘制工具-->
    <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
    <!--加载检索信息窗口-->
    <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
    <script type="text/javascript">


    var map = new BMap.Map("container");          // 创建地图实例  
    map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.ScaleControl());
    var opts = {anchor: BMAP_ANCHOR_BOTTOM_RIGHT}
    map.addControl(new BMap.MapTypeControl(opts));
    var point = new BMap.Point(119.440148, 32.400496);  // 创建点坐标  
    map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别  
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    var overlayarea = new BMap.Marker();
    var overlayareaedit = new BMap.Marker();
    var overlays = [];
    var overlaycomplete = function (e) {
        overlays.push(e.overlay);
    };
    var styleOptions = {
        strokeColor: "red", //边线颜色。
        fillColor: "red", //填充颜色。当参数为空时，圆形将没有填充效果。
        strokeWeight: 3, //边线的宽度，以像素为单位。
        strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
        fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
        strokeStyle: 'solid' //边线的样式，solid或dashed。
    }
    //实例化鼠标绘制工具
    var drawingManager = new BMapLib.DrawingManager(map, {
        isOpen: false, //是否开启绘制模式
        enableDrawingTool: false, //是否显示工具栏
        drawingToolOptions: {
            anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
            offset: new BMap.Size(5, 5), //偏离值
        },
        circleOptions: styleOptions, //圆的样式
        polylineOptions: styleOptions, //线的样式
        polygonOptions: styleOptions, //多边形的样式
        rectangleOptions: styleOptions //矩形的样式
    });

    var polygoncomplete = function (Polygon) {
        var pointsArrayString = "";
        var obj = Polygon.getPath();
        $.each(obj, function (n, point) {
            //alert(point['lng']);
            pointsArrayString = pointsArrayString + point['lng'] + ',' + point['lat'] + ';';
        })
        pointsArrayString = pointsArrayString.substr(0, pointsArrayString.length - 1);
        $('#pointstext').val(pointsArrayString);

        /*  Polygon.enableEditing();
         Polygon.addEventListener("dblclick", function(){    
         Polygon.disableEditing();
         });
         */
    }

    //添加鼠标绘制工具监听事件，用于获取绘制结果
    drawingManager.addEventListener('overlaycomplete', overlaycomplete);
    drawingManager.addEventListener('polygoncomplete', polygoncomplete);
    drawingManager.addEventListener('markercomplete', markercomplete);


    function clearAll() {
        //  map.clearOverlays();
        for (var i = 0; i < overlays.length; i++) {
            map.removeOverlay(overlays[i]);
        }
        overlays.length = 0
    }

    function dreaw() {
        clearAll();
        $('#pointstext').val("");
        drawingManager.setDrawingMode(BMAP_DRAWING_POLYGON);
        drawingManager.open();
    }


    $('#btnshowAddarea').click(function () {
        $('#addareadiv').show();
    });

    $('.close').click(function () {
        $('#addareadiv').hide();
        $('#editareadiv').hide();
        clearAll();
    });

    //读取现有区域数据
    function LoadAreaData() { 
        map.clearOverlays();
        $.post("{:U('LbsProjectArea/AjaxAreaList')}", {
            mid:{$_mid}
        },
                function (data) {
                    $.each(data, function (i, n) {
                        //alert( "Item #" + i + ": " + n.id );
                        var pointarry = makePointArray(n.points);
                        drawPolygon(pointarry, n.id, n.areaname);
                    });
                }, "json");
    }
    //将数据库点数据 转换成百度地图PointArray
    function makePointArray(data) {
        var points = [];
        var dataarry = data.split(';');
        for (var i = 0; i < dataarry.length; i++) {
            var pointstr = dataarry[i].split(',');
            var point = new BMap.Point(pointstr[0], pointstr[1]);
            points.push(point);
        }
        return points;
    }

    //将百度地图PointArray 绘制出来
    function drawPolygon(PointArray, id, areaName) {
        var polygon = new BMap.Polygon(PointArray, {fillColor: "yellow", strokeColor: "blue", strokeWeight: 2, strokeOpacity: 1, fillOpacity: 0.2});  //创建多边形
        var centerpoint = polygon.getBounds().getCenter();
        polygon.id = id;
        polygon.areaName = areaName;
        var opts = {
            position: centerpoint, // 指定文本标注所在的地理位置
            offset: new BMap.Size(-10, -10)    //设置文本偏移量
        }
        var label = new BMap.Label(areaName, opts);  // 创建文本标注对象
        label.setStyle({
            color: "red",
            fontSize: "20px",
            height: "20px",
            lineHeight: "20px",
            fontFamily: "微软雅黑",
            fontWeight: "bold",
            padding: "0px",
            border: 'none',
        });
        map.addOverlay(label);
        map.addOverlay(polygon);           //增加多边形
        polygon.addEventListener('click', function () {
            // alert(areaName);
            // alert(id);
            $.getJSON("{:U('LbsProjectArea/AjaxArea')}", {id:polygon.id}, function (json) {
                
                $('.idedit').val(json.id);
                $("#areaNameedit").val(json.areainfoid);
                //$("#areaNameedit").find("option").eq(json.areainfoid).attr("selected","selected")
                $('#nameedit').val(json.name);
                $('#phoneedit').val(json.phone);
                $('#warehouseedit').val(json.warehouse);
                $('#pointsedit').val(json.points);
                overlayareaedit = polygon;
            });
            $('#editareadiv').show();
        });
    };


    $('#dreawEdit').click(function () {
        overlayareaedit.enableEditing();
        overlayareaedit.setStrokeColor("red");
        overlayareaedit.setFillColor("red");
        $('#dreawEdit').hide();
        $('#dreawEditEnd').show();
    });

    $('#dreawEditEnd').click(function () {
        overlayareaedit.disableEditing();
        overlayareaedit.setStrokeColor("blue");
        overlayareaedit.setFillColor("yellow");

        var pointsArrayString = "";
        var obj = overlayareaedit.getPath();
        $.each(obj, function (n, point) {
            //alert(point['lng']);
            pointsArrayString = pointsArrayString + point['lng'] + ',' + point['lat'] + ';';
        })
        pointsArrayString = pointsArrayString.substr(0, pointsArrayString.length - 1);
        $('#pointsedit').val(pointsArrayString);

        $('#dreawEdit').show();
        $('#dreawEditEnd').hide();
    });

    //显示仓库
    function showwarehouse() {
        $.getJSON("{:U('LbsProjectArea/AjaxWarehouseList')}", {}, function (json) {
            $.each(json, function (i, n) {
                var point = new BMap.Point(n.lng,n.lat);
                var marker = new BMap.Marker(point); // 创建点
                map.addOverlay(marker);
                marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

            });
        });
    }
    
    //点区域识别
    function checkPoint(){
        
        drawingManager.setDrawingMode(BMAP_DRAWING_MARKER);
        drawingManager.open();
    }
    
    function markercomplete(marker){
        
        var lng=marker.getPosition().lng;
        var lat=marker.getPosition().lat; 
        var appkey='{$_appkey}'; 
        var pid={$_pid};
        $.getJSON("{:U('LbsProjectArea/CheckPoint')}", {appkey:appkey,pid:pid,lng:lng,lat:lat}, function (json) { 
            alert(json.info);
        });
    }
    LoadAreaData();
    </script> 


</block>
